<template>
   <el-row :gutter="20">
        <template v-if="loading">
            <el-col :span="6" :offset="0" v-for="i in 4" :key="i">
                <el-skeleton  :loading="loading" animated>
                    <template #template>
                        <el-card shadow="always"  class="border-0">
                            <template #header>
                                <div class="flex justify-between">
                                    <el-skeleton-item variant="text" style="width: 50%" />
                                    <el-skeleton-item variant="text" style="width: 20%" />
                                </div>
                            </template>
                            <el-skeleton-item variant="text" style="width: 80%;height: 30px;" />
                            <el-divider direction="horizontal" content-position="left"></el-divider>
                            <div class="flex justify-between text-sm text-gray-500">
                            <el-skeleton-item variant="text" style="width: 50%" />
                            <el-skeleton-item variant="text" style="width: 20%" />
                            </div>
                        </el-card>
                    </template>
                </el-skeleton>
            </el-col>
        </template>
        <el-col v-else :span="6" :offset="0" v-for="(item,index) in PugPanels" :key="index">
            <el-card shadow="always"  class="border-0">
                <div class="flex justify-between">
                    <span class="text-sm text-gray-400">{{item.title}}</span>
                    <el-tag type="success"   effect="plain">{{item.tag}}</el-tag>
                </div>
                <span class="text-2xl  text-gray-700">
                  <pug-num :value="item.count"></pug-num>         
                </span>
                <el-divider direction="horizontal" style="border-top-color:#eee;margin: 12px 0;" content-position="left"></el-divider>
                <div class="flex justify-between text-sm text-gray-500">
                    <span>{{item.stitle}}</span>
                    <span><pug-num :value="item.svalue"></pug-num></span>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script  setup>
   import {reactive,ref} from 'vue'
   var loading =ref(true);

    setTimeout(()=>{
        loading.value = false;
    },600)


   var PugPanels =  reactive([
       {title:"订单支付",tag:"年",count:488,stitle:"总支付订单",svalue:114},
       {title:"订单量",tag:"月",count:4188,stitle:"转换率",svalue:142},
       {title:"销售额",tag:"日",count:4288,stitle:"总销售额",svalue:314},
       {title:"新增用户",tag:"日",count:2488,stitle:"总用户",svalue:144}
    ])

</script>
